<template>
	<view class="content">
		<view class="top">
			<view class="top-line">
				<view class="top-tjm">
					<text style="float: left;">推荐码：5100027 </text>
					<image src="../../static/pron/pron01.png" style="width: 40rpx;height: 40rpx;margin:6rpx 0 0 10rpx;" @click="copy('5100027')"></image>
				</view>
			</view>
			<view class="top-tx">
				<view class="top-tx-left">
					<image src="../../static/shop/shop13.png" style="width: 100rpx;height: 100rpx;margin:6rpx 0 0 10rpx;border-radius: 50% 50%;"></image>
				</view>
				<view class="top-tx-right">
					<text>非羽</text><br>
					<text>当前设备：00005702881015425526</text><text style="font-size: 24rpx;color: #f1d6a9;margin-left: 16rpx;"> VIP商户</text><br>
					<text>已绑定1台设备</text><text style="text-decoration: underline;margin-left: 30rpx;color: #fff;">切换设备</text>
				</view>
			</view>
			<view class="top-ed">
				<view class="top-block" @click="toPageBalance">
					<text style="font-size: 36rpx;color: #fff;font-weight: bold;">4.88</text><br>
					<text>我的余额</text>
				</view>
				<view class="top-block" @click="toPageBill">
					<text style="font-size: 36rpx;color: #fff;font-weight: bold;">365</text><br>
					<text>话费抵扣分</text>
				</view>
				<view class="top-block" @click="toPageAward">
					<text style="font-size: 36rpx;color: #fff;">100000.00元</text><br>
					<text>待返奖励</text>
				</view>
			</view>
		</view>
		<view class="title">我的省钱报告</view>
		<view class="report-bg">
			<view class="report-line">
				<view class="report-wen">
					<text>累计节省手续费</text><br>
					<text class="ft20">4.88</text>
				</view>
				<view class="report-wen">
					<text>预计最高还能省</text><br>
					<text class="ft20">0</text>
				</view>
			</view>
			<view class="report-line" style="margin-top: 40rpx;">
				<text>最近0元交易，折合收款费率0.6%</text>
			</view>
			<view class="report-white">
				<text style="font-weight: bold;color: #8e4244;">分享好友使用，可得推荐奖励</text>
				<view class="dation" @click="toPageInvite">去推荐</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav-list" @click="toPageStrategy">
				<image src="../../static/pron/pron02.png" class="img-left"></image>
				<text>会员荣耀规则</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
			</view>
			<view class="nav-list" @click="toPageReward">
				<image src="../../static/pron/pron04.png" class="img-left"></image>
				<text>推荐好友奖励</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
			</view>
			<view class="nav-list" @click="toPageOrder">
				<image src="../../static/pron/pron05.png" class="img-left"></image>
				<text>我的订单</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
				<text style="float: right;color:#989898;font-size:24rpx;">查看全部订单</text>
			</view>
			<view class="nav-list" @click="toPageTask">
				<image src="../../static/pron/pron06.png" class="img-left"></image>
				<text>我的任务</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
				<text style="float: right;color:#989898;font-size:24rpx;">累计插队 <text style="color:#f45945;font-size:26rpx;margin: 0 4rpx;"> 0</text> 名</text>
			</view>
			<view class="nav-list" @click="toPageAddress">
				<image src="../../static/pron/pron07.png" class="img-left"></image>
				<text>我的收货地址</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
			</view>
			<view class="nav-list" @click="open()">
				<image src="../../static/pron/pron08.png" class="img-left"></image>
				<text>联系客服</text>
				<image src="../../static/pron/pron03.png" class="img-right"></image>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: ''
			}
		},
		onLoad() {

		},
		methods: {
			open(){
				this.$refs.popup.open('top')
			},
			toPageStrategy() {
				uni.navigateTo({
				  url: '/pages/home/strategy/index'
				});
			},
			toPageReward() {
				uni.navigateTo({
				  url: '/pages/pron/reward/index'
				});
			},
			toPageOrder() {
				uni.navigateTo({
				  url: '/pages/pron/order/index'
				});
			},
			toPageTask() {
				uni.navigateTo({
				  url: '/pages/pron/task/index'
				});
			},
			toPageAddress() {
				uni.navigateTo({
				  url: '/pages/pron/address/index'
				});
			},
			toPageInvite() {
				uni.navigateTo({
				  url: '/pages/pron/invite/index'
				});
			},
			toPageBalance() {
				uni.navigateTo({
				  url: '/pages/pron/balance/index'
				});
			},
			toPageBill() {
				uni.navigateTo({
				  url: '/pages/pron/bill/index'
				});
			},
			toPageAward() {
				uni.navigateTo({
				  url: '/pages/pron/award/index'
				});
			},
			copy(text){
			    uni.setClipboardData({
			        data: '5100027',
			        showToast: false,
			        success: () => {
			            uni.hideToast();   // 隐藏弹出提示
			            uni.hideKeyboard();   //  隐藏软键盘
			            uni.showToast({
			                title:'复制成功'
			            })
			
			        }
			    });         
			}
		}
	}
</script>

<style scoped>
	page{
		font-size: 26rpx;
		
	} 
	.big{
		display: flex;
		width: 100%;
	}
	.content {
		display: inherit;
		padding: 30rpx;
	}
	.top{
		background: #3a3f52;
		border-radius: 30rpx;
		color: #dadde6;
		padding-bottom: 50rpx;
	}
	.top-line{
		width: 100%;
		display: inline-block;
	}
	.top-tjm{
		float: right;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: #5f3d18;
		background: linear-gradient(90deg, #e5b881 0%, #f6d7ab 100%);
		padding: 0 40rpx;
		border-top-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
	}
	.top-tx{
		display: flex;
		font-size: 24rpx;
	}
	.top-tx-left{
		margin-left: 30rpx;
	}
	.top-tx-right{
		margin-left: 30rpx;
		line-height: 46rpx;
	}
	.top-ed{
		padding: 40rpx 0 0 30rpx;
	}
	.top-block{
		border-radius: 20rpx;
		background: #4b4c5e;
		display: inline-block;
		padding: 30rpx;
		text-align: center;
		margin-right: 16rpx;
		line-height: 45rpx;
	}
	.title{
		font-size: 40rpx;
		font-weight: bold;
		font-style: italic;
		color: #f45945;
		padding: 30rpx 0;
	}
	.report-bg{
		border-radius: 30rpx;
		background: linear-gradient(90deg, #f5573a 0%, #fa7e3e 100%);
		padding: 40rpx;
	}
	.report-wen{
		display: inline-block;
		text-align: center;
		color: #fff;
		margin-right: 80rpx;
		line-height: 45rpx;
	}
	.report-line{
		color: #fff;
	}
	.ft20{
		font-size: 40rpx;
	}
	.report-white{
		margin-top: 60rpx;
		background: #fff;
		border-radius: 20rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 30rpx;
	}
	.dation{
		display: inline-block;
		float: right; 
		background:#fb7b3e;
		color: #fff;
		padding: 8rpx 40rpx;
		border-radius: 40rpx;
		line-height: 45rpx;
		margin-top: 16rpx;
	}
	.nav{
		margin-top: 50rpx;
	}
	.nav-list{
		color: #333;
		border-bottom: solid 1px #ededed;
		font-size: 30rpx;
		line-height: 90rpx;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
	}
	.img-left{
		width: 44rpx;
		height: 44rpx;
		margin:26rpx 30rpx 0 10rpx;
		float: left;
	}
	.img-right{
		width: 45rpx;
		height: 45rpx;
		margin:24rpx 30rpx 0 10rpx;
		float: right;
	}
</style>
